import { Dropdown, MenuProps, Avatar, Modal, message } from "antd"
import { UserOutlined, ExclamationCircleFilled} from "@ant-design/icons"
import { HOME_URL } from "@/config/config";
import { setToken } from "@/redux/modules/global";
import { useNavigate } from "react-router-dom";
import InfoModal, { InfoRef } from "./InfoModal";
import PasswordModal, { PassRef } from "./PaswordModal";
import { useRef } from "react";
import { useDispatch } from "react-redux";

const AvatarIcon = () => {
    const navigate = useNavigate()
    const { confirm } = Modal;
    const dispatch = useDispatch()

    const infoRef = useRef<InfoRef>(null)
    const passRef = useRef<PassRef>(null)

    // 退出登录
    const logout = () => {
        Modal.confirm({
            title: '温馨提示',
            icon: <ExclamationCircleFilled />,
            content: '是否退出登录',
            onOk() {
                dispatch(setToken(""))
                message.success("退出登录成功！")
                navigate("/login")
            }
        });
    }

    const items: MenuProps['items'] = [
        {
            key: 'sy',
            label: <span className="dropdown-item">首页</span>,
            onClick: () => navigate(HOME_URL)
        },
        {
            key: 'grxx',
            label: <span className="dropdown-item">个人信息</span>,
            onClick: () => infoRef.current?.showModal()
        },
        {
            key: 'xgmm',
            label: <span className="dropdown-item">修改密码</span>,
            onClick: () => passRef.current?.showModal()
        },
        {
            type: 'divider',
        },
        {
            key: 'tcdl',
            label: <span className="dropdown-item">退出登录</span>,
            onClick: logout
        }
    ];

    return (
        <>
            <Dropdown menu={{items}} placement="bottom" arrow={{ pointAtCenter: true }} trigger={['click']}>
                <Avatar size="large" icon={<UserOutlined />} />
            </Dropdown>
            <InfoModal ref={infoRef} />
            <PasswordModal ref={passRef} />
        </>
    )
}

export default AvatarIcon